<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="产品列表" name="first">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-button type="primary" @click="clickCreat">添加</el-button>
          </el-col>
          <el-col>
            <div style="display: flex; justify-content: flex-end">
              <el-input
                @clear="clear"
                clearable
                v-model="form.search"
                style="width: 300px; margin-left: 15px"
                placeholder="搜索公司、联系人"
                class="input-with-select"
              >
                <el-button
                  @click="searchVal"
                  slot="append"
                  style="
                    background-color: #45a321;
                    color: #fff;
                    border-radius: 0;border:1px solid #45a321
                  "
                  >搜索</el-button
                >
                <i slot="prefix-icon" class="el-icon-search"></i>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-table
          align="center"
          :data="list.list"
          border
          style="width: 100%; margin: 20px 0"
        >
          <el-table-column align="center" label="封面图">
            <template slot-scope="scope">
              <div style="position: relative; width: 100%; padding-top: 56%">
                <img
                  :src="scope.row.tpic"
                  alt=""
                  style="
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                  "
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="产品名称">
          </el-table-column>
          <el-table-column align="center" prop="company" label="产品单位">
          </el-table-column>
          <el-table-column
            align="center"
            prop="patent_list"
            label="核心涉及专利"
          >
          </el-table-column>
          <el-table-column align="center" prop="prize" label="获得奖项">
          </el-table-column>
          <el-table-column align="center" prop="myorder" label="排序">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                class="editText"
                @click="clickEdit(scope.row.id)"
                type="text"
                >修改</el-button
              >
              <el-button
                class="deletText"
                @click="deletUser(scope.row.id)"
                type="text"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="list.page"
            :page-size="list.size"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(list.count)"
            align="left"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="公司名录" name="second">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-button type="primary" @click="companyCreat">添加</el-button>
          </el-col>
          <el-col>
            <div style="display: flex; justify-content: flex-end">
              <el-input
                @clear="companyclear"
                clearable
                v-model="CompanyArr.search"
                style="width: 300px; margin-left: 15px"
                placeholder="搜索公司、联系人"
                class="input-with-select"
              >
                <el-button
                  @click="companyVal"
                  slot="append"
                  style="
                    background-color: #45a321;
                    color: #fff;
                    border-radius: 0;border:1px solid #45a321
                  "
                  >搜索</el-button
                >
                <i slot="prefix-icon" class="el-icon-search"></i>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-table
          align="center"
          :data="Company.list"
          border
          style="width: 100%; margin: 20px 0"
        >
          <el-table-column align="center" label="封面图">
            <template slot-scope="scope">
              <div style="position: relative; width: 100%; padding-top: 56%">
                <img
                  :src="scope.row.tpic"
                  alt=""
                  style="
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                  "
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="公司名称">
          </el-table-column>
          <el-table-column align="center" prop="myorder" label="排序">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                class="editText"
                @click="CompanyEdit(scope.row.id)"
                type="text"
                >修改</el-button
              >
              <el-button
                class="deletText"
                @click="CompanytUser(scope.row.id)"
                type="text"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="Company.page"
            :page-size="Company.size"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(Company.count)"
            align="left"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="顺德智造"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="cancle"
    >
      <div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">封面图</p>
          <div class="left_w s_flex s_align_items">
            <div style="margin-right: 20px">
              <el-upload
                class="upload-demo"
                :on-success="onSuccess"
                :show-file-list="false"
                :action="`${VUE_APP_BASE_API}/v1/index/upload `"
              >
                <!-- -->
                <el-button type="primary">上传封面图</el-button>
              </el-upload>
            </div>
            <el-button v-if="form.tpic" @click="form.tpic = ''" type="danger"
              >删除</el-button
            >
          </div>
        </div>
        <div class="news_mrt" v-if="form.tpic">
          <img style="width: 100%" :src="form.tpic" />
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">产品封面图</p>
          <div class="left_w s_flex s_align_items">
            <div style="margin-right: 20px">
              <el-upload
                multiple
                class="upload-demo"
                :on-success="onSuccess2"
                :show-file-list="false"
                :action="`${VUE_APP_BASE_API}/v1/index/upload `"
              >
                <!-- -->
                <el-button type="primary">上传封面图</el-button>
              </el-upload>
            </div>
          </div>
        </div>
        <div class="news_mrt" v-if="form.morepic">
          <div class="s_flex s_align_items s_flex-wrap">
            <div
              style="width: 25%; margin-left: 20px; position: relative"
              v-for="(item, index) in form.morepic"
              :key="index"
            >
              <div class="close_img" @click="closeImg(index)">
                <i class="iconfont icon-guanbi"></i>
              </div>
              <img style="width: 100%" :src="item" />
            </div>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">产品名称</p>
          <div class="left_w">
            <el-input v-model="form.title" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">产品单位</p>
          <div class="left_w">
            <el-select v-model="form.company_id" clearable placeholder="请选择">
              <el-option
                v-for="item in CompanyList.list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="news_mrt">
          <el-form
            ref="form"
            :model="form"
            label-width="100px"
            label-position="left"
          >
            <el-form-item
              prop="name"
              :label="'核心专利' + (index + 1)"
              v-for="(item, index) in FormArr"
              :key="index"
            >
              <el-input
                type="name"
                @input="changeInput(index)"
                style="width: 80%"
                placeholder="请输入核心专利'"
                v-model="patent_list[index].name"
              ></el-input>
              <el-button
                type="primary"
                v-if="FormArr - 1 == index"
                @click="addItem(index)"
                >继续添加</el-button
              >
              <el-button type="danger" v-else @click="deleteItem(index)"
                >删除</el-button
              >
              <!-- primary danger-->
            </el-form-item>
          </el-form>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">产品分类</p>
          <div class="left_w">
            <el-select v-model="form.type" clearable placeholder="请选择">
              <el-option
                v-for="item in tag"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">购买链接</p>
          <div class="left_w">
            <el-input
              v-model="form.buy_href"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div
          class="s_flex s_align_items news_mrt"
          v-for="(item, index) in prizeNum"
          :key="index"
        >
          <div class="s_flex s_align_items" style="width: 100%">
            <div style="width: 50%" class="s_flex s_align_items">
              <p style="width: 34%">获奖年届</p>
              <div class="left_w">
                <el-input
                  v-model="prizeArr[index].year"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
            <div style="width: 50%" class="s_flex s_align_items">
              <p style="width: 20%; margin-left: 15px">获得奖项</p>
              <div class="left_w">
                <el-select
                  v-model="prizeArr[index].prize"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in PrizeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <el-button type="primary" @click="addprizeNum(index)"
              >添加</el-button
            >
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt"></div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input
              v-model="form.myorder"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="news_mrt">
          <p>产品优势</p>
          <Editor
          style="margin-top: 20px" :id="`test3`" v-model="form.advantage" 
          />
        </div>
        <div class="news_mrt" style="margin-top: 100px">
          <p>产品介绍</p>
          <Editor
          style="margin-top: 20px" :id="`test4`" v-model="form.desc" 
          />
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="公司名录"
      :visible.sync="companyVisible"
      width="35%"
      :before-close="Companycancle"
    >
      <div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">公司名称</p>
          <div class="left_w">
            <el-select
              v-model="CompanyArr.company_id"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in CompanyList.list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input
              v-model="CompanyArr.myorder"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="Companycancle">取 消</el-button>
        <el-button type="primary" @click="CompanySave">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  WebCompanyList,
  productList,
  productAdd,
  productEdit,
  productDel,
  productInfo,
  getPrize,
  companyList,
  companyAdd,
  companyInfo,
  companyEdit,
  companyDel,
  productGetType,
} from "@/api/admin";
import Editor from "@/components/Editor";
export default {
  data() {
    return {
      VUE_APP_BASE_API,
      list: [],
      activeName: "first",
      dialogVisible: false,
      companyVisible: false,
      form: {
        product_id: "",
        title: "",
        content: "",
        tpic: "",
        search: "",
        myorder: "",
        morepic: [],
        buy_href: "",
        company_id: "",
        type: "",
        year: "",
        prize: "",
        advantage: "",
        desc: "",
      },
      prizeNum: 1,
      patent_list: [
        {
          name: "",
        },
      ],
      prizeArr: [
        {
          year: "",
          prize: "",
        },
      ],
      FormArr: 1,
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
      CompanyList: [],
      PrizeList: [],
      tag: [],
      Company: [],
      CompanyArr: {
        company_id: "",
        myorder: "",
        comptitleany_id: "",
        tpic: "",
        search: "",
      },
    };
  },
  components: {
    Editor,
  },
  mounted() {
    this.getLIst();
    this.getWebCompanyList();
    this.getCompanyList();
  },
  methods: {
    deleteItem(index) {
      this.FormArr--;
      this.patent_list.splice(index, 1);
    },
    closeImg(i) {
      this.form.morepic.splice(
        this.form.morepic.indexOf(this.form.morepic[i].tpic),
        1
      );
    },
    addprizeNum(index) {
      // console.log(index);
      if (this.prizeArr[index].year == "" || this.prizeArr[index].prize == "") {
        this.$message.error("请填写获奖年或者获奖");
      } else {
        this.prizeNum++;
        this.prizeArr.push({
          year: "",
          prize: "",
        });
      }
    },
    async getCompanyList() {
      try {
        this.Company = await companyList({
          keyword: this.CompanyArr.search,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getWebCompanyList() {
      try {
        this.CompanyList = await WebCompanyList({});
        this.PrizeList = await getPrize();
        this.tag = await productGetType({ is_all: 0 });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    handleClick() {},
    searchVal() {
      this.getLIst();
    },
    companyVal() {
      this.getCompanyList();
    },
    companyCreat() {
      this.companyVisible = true;
    },
    clickCreat() {
      this.dialogVisible = true;
    },
    async clickEdit(id) {
      try {
        this.form = await productInfo({
          product_id: id,
        });
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async CompanyEdit(id) {
      try {
        this.CompanyArr = await companyInfo({
          excellent_company_id: id,
        });
        this.companyVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    deletUser(id) {
      this.$confirm("此操作将删除该新闻, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await productDel({
              product_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    CompanytUser(id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await companyDel({
              excellent_company_id: id,
            });
            this.getCompanyList();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    clear() {
      this.getLIst();
    },
    companyclear() {
      this.getCompanyList();
    },
    handleClose() {
      this.clearDesc = 1;
      this.dialogVisible = false;
    },
    async onSuccess(response, file, fileList) {
      if (response) {
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async onSuccess2(response, file, fileList) {
      if (response) {
        this.form.morepic.push(response.data.url);
        this.$message.success("上传成功");
      }
    },
    async onSuccess3(response, file, fileList) {
      if (response) {
        this.CompanyArr.tpic = response.data.url;
        this.$message.success("上传成功");
      }
    },
    async getLIst() {
      try {
        this.list = await productList({
          keyword: this.form.search,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    descVal(val) {
      this.form.desc = val;
    },
    advantageVal(val) {
      this.form.advantage = val;
    },
    async save() {
      try {
        if (this.form.id) {
          await productEdit({
            product_id: this.form.id,
            title: this.form.title,
            tpic: this.form.tpic,
            myorder: this.form.myorder,
            morepic: this.form.morepic,
            company_id: this.form.company_id,
            patent_list: this.patent_list.map((item) => item.name),
            type: this.form.type,
            buy_href: this.form.buy_href,
            // year: this.form.year,
            // prize: this.form.prize,
            prizeArr: this.prizeArr,
            advantage: this.form.advantage,
            desc: this.form.desc,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.clearDesc = 1;
          this.form = {
            product_id: "",
            title: "",
            content: "",
            tpic: "",
            search: "",
            myorder: "",
            morepic: [],
            buy_href: "",
            company_id: "",
            type: "",
            year: "",
            prize: "",
            advantage: "",
            desc: "",
          };
        } else {
          await productAdd({
            title: this.form.title,
            tpic: this.form.tpic,
            myorder: this.form.myorder,
            morepic: this.form.morepic,
            company_id: this.form.company_id,
            patent_list: this.patent_list.map((item) => item.name),
            type: this.form.type,
            buy_href: this.form.buy_href,
            // year: this.form.year,
            // prize: this.form.prize,
            prizeArr: this.prizeArr,
            advantage: this.form.advantage,
            desc: this.form.desc,
          });
          this.clearDesc = 1;
          this.form = {
            product_id: "",
            title: "",
            content: "",
            tpic: "",
            search: "",
            myorder: "",
            morepic: [],
            buy_href: "",
            company_id: "",
            type: "",
            year: "",
            prize: "",
            advantage: "",
            desc: "",
          };
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async CompanySave() {
      try {
        if (this.form.id) {
          await companyEdit({
            excellent_company_id: this.CompanyArr.id,
            myorder: this.CompanyArr.myorder,
            company_id: this.CompanyArr.company_id,
          });
          this.getCompanyList();
          this.$message.success("添加成功");
          this.companyVisible = false;
          this.CompanyArr = {
            company_id: "",
            myorder: "",
            comptitleany_id: "",
            tpic: "",
            search: "",
          };
        } else {
          await companyAdd({
            myorder: this.CompanyArr.myorder,
            company_id: this.CompanyArr.company_id,
          });
          this.CompanyArr = {
            company_id: "",
            myorder: "",
            comptitleany_id: "",
            tpic: "",
            search: "",
          };
          this.getCompanyList();
          this.$message.success("添加成功");
          this.companyVisible = false;
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle() {
      this.dialogVisible = false;
      this.form = {
        product_id: "",
        title: "",
        content: "",
        tpic: "",
        search: "",
        myorder: "",
        morepic: [],
        buy_href: "",
        company_id: "",
        type: "",
        year: "",
        prize: "",
        advantage: "",
        desc: "",
      };
    },
    Companycancle() {
      this.companyVisible = false;
      this.CompanyArr = {
        company_id: "",
        myorder: "",
        comptitleany_id: "",
        tpic: "",
        search: "",
      };
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const resUser = await productList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const resUser = await productList({
          keywords: this.form.search,
          page: currentPage,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //每页下拉显示数据
    async handleSizeChange2(size) {
      try {
        const resUser = await getCompanyList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange2(currentPage) {
      try {
        const resUser = await getCompanyList({
          keywords: this.form.search,
          page: currentPage,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    changeInput(index) {
      this.patent_list[index].message = "";
    },
    addItem(index) {
      if (this.patent_list[index].name == "") {
        this.$message.error("请填写专利申请号");
      } else {
        this.FormArr++;
        this.patent_list.push({
          name: "",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
.close_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .iconfont {
    font-size: 25px;
    color: red;
  }
}
</style>